<template>
    <div class="flex flex_column" style="height: 100%;">
        <div class="flex_1 scll" style="overflow: auto;">
            <template v-for="(item,index) in formData" :key="index">
                <div class="cell" v-if="item.price_type == 2 || item.price_type == 3">
                    <div style="margin-bottom: 12px;font-size: 20px;font-weight: 600">{{ item.price_type == 2?'到站装卸费':'发站装卸费' }}</div>
                    <div class="flex align_center" style="margin-bottom: 12px;">
                        <div style="width: 140px;">税率：</div>
                        <a-input v-model="item.tax_price" :style="{width:'220px'}" placeholder="请输入税率" allow-clear>
                            <template #suffix>
                                <div>%</div>
                            </template>
                        </a-input>
                    </div>
                    <div v-for="(items,indexs) in item.price_config" :key="indexs">
                        <div style="margin-bottom: 20px;" v-if="items.transport_type == 2 || items.transport_type == 3">
                            <div class="flex " style="margin-bottom: 12px;" >
                                <div style="width: 140px;">{{items.transport_type == 2?'整车':'批量快运'}}结算比例：</div>
                                <div>
                                    <a-input v-model="items.price" :style="{width:'220px'}" placeholder="请输入结算比例" allow-clear>
                                        <template #suffix>
                                            <div>%</div>
                                        </template>
                                    </a-input>
                                    <div style="margin-top: 12px;" >特殊品类结算：</div>
                                    
                                    <div class="flex align_center" style="margin-top: 12px;" v-for="(ite,inx) in items.goods" :key="inx">
                                        <a-cascader v-model="ite.good" :options="pinLeiList" :style="{width:'320px'}" :field-names="{value: 'id', label: 'name'}" placeholder="请选择品类"  allow-search multiple  />
                                        <div style="margin-left: 200px;" class="flex ">
                                            <a-input v-model="ite.price" :style="{width:'120px',marginRight:'10px'}" placeholder="请输入" allow-clear>
                                                <template #suffix>
                                                    <div>{{ ite.type == 1?'%':'元/吨' }}</div>
                                                </template>
                                            </a-input>
                                            <a-select :options="typeList" :style="{width:'120px'}" v-model="ite.type" placeholder="请选择" />
                                        </div>
                                        <div style="margin-left: 200px;" v-if="inx != 0"><a-link @click="handleDel(inx,indexs,index)">删除</a-link></div>
                                    </div>
                                    <div style="margin-top: 12px;">
                                        <a-button type="primary" @click="handleAdd(indexs,index)"> 新增 </a-button>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <div style="margin-bottom: 20px;" v-if="items.transport_type == 1">
                            <div class="flex">
                                <div style="width: 140px;">集装箱结算比例：</div>
                                <a-input v-model="items.price" :style="{width:'220px'}" placeholder="请输入结算比例" allow-clear>
                                    <template #suffix>
                                        <div>%</div>
                                    </template>
                                </a-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell" v-if="item.price_type == 4 || item.price_type == 5">
                    <div style="margin-bottom: 12px;font-size: 20px;font-weight: 600">{{ item.price_type == 4?'掏箱费':'篷布管理费' }}</div>
                    <div class="flex align_center" style="margin-bottom: 12px;">
                        <div style="width: 140px;">税率：</div>
                        <a-input v-model="item.tax_price" :style="{width:'220px'}" placeholder="请输入税率" allow-clear>
                            <template #suffix>
                                <div>%</div>
                            </template>
                        </a-input>
                    </div>
                    <div v-for="(items,indexs) in item.price_config" :key="indexs">
                        <div style="margin-bottom: 20px;" v-if="items.transport_type == 1">
                            <div class="flex">
                                <div style="width: 140px;">集装箱：</div>
                                <div  class="flex align_center" v-for="(ite,inx) in items.box" :key="inx" style="margin-right: 200px">
                                    <div style="width: 80px;">{{ ite.box_size == 1?'20英尺':'40英尺' }}</div>
                                    <a-input v-model="ite.price" :style="{width:'220px'}" placeholder="请输入" allow-clear>
                                        <template #suffix>
                                            <div>{{item.price_type == 4?'元/箱':'元/车'}}</div>
                                        </template>
                                    </a-input>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom: 20px;" v-if="items.transport_type == 2 || items.transport_type == 3">
                            <div class="flex">
                                <div style="width: 140px;">{{items.transport_type == 2?'整车':'批量快运'}}：</div>
                                <a-input v-model="items.price" :style="{width:'220px'}" placeholder="请输入" allow-clear>
                                    <template #suffix>
                                        <div>元/车</div>
                                    </template>
                                </a-input>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="flex justify_end" style="margin-top: 20px;">
            <a-button type="primary" @click="handleBaoCun">保存</a-button>
        </div>
    </div>
  </template>
  
  <script setup>
  import MaFormModal from "@/components/ma-form-modal/index.vue"
  import {ref,onMounted,defineProps,defineEmits} from "vue";
  import dept from "@/api/system/dept";
  import systemDeptPriceConfig from '@/api/system/systemDeptPriceConfig'
  import {Message} from "@arco-design/web-vue";
  import { request } from "@/utils/request.js";
  const props = defineProps({
    fromData:{
        default: {},
    }
  })
  const emits = defineEmits(['shuaxin'])
  const tab = ref(1)
  const updetaID = ref('')
  const typeList = ref([
    {
        label:'按百分比结算',
        value:1
    },
    {
        label:'按固定价结算',
        value:2
    },
  ])
  const formData = ref([
    {
        price_type:2,   // 到站装卸费
        tax_price:'',   // 税额
        price_config:[
            {
                transport_type: "2",
                price:'',  // 结算比例
                goods:[
                    {
                        good:'',
                        price:'', // 百分比或固定单价
                        type:1,   // 1 按百分比  2 按单价
                    }
                ]
            },
            {
                transport_type: "1",
                price: '', // 结算比例
            },
            {
                transport_type: "3",
                price:'',  // 结算比例
                goods:[
                    {
                        good:'',
                        price:'', // 百分比或固定单价
                        type:1,   // 1 按百分比  2 按单价
                    }
                ]
            },
        ]
    },
    {
        price_type:3,   // 发站装卸费
        tax_price:'',   // 税额
        price_config:[
            {
                transport_type: "2",
                price:'',  // 结算比例
                goods:[
                    {
                        good:'',
                        price:'', // 百分比或固定单价
                        type:1,   // 1 按百分比  2 按单价
                    }
                ]
            },
            {
                transport_type: "1",
                price: '', // 结算比例
            },
            {
                transport_type: "3",
                price:'',  // 结算比例
                goods:[
                    {
                        good:'',
                        price:'', // 百分比或固定单价
                        type:1,   // 1 按百分比  2 按单价
                    }
                ]
            },
        ]
    },
    {
        price_type:4,   // 掏箱费
        tax_price:'',   // 税额
        price_config:[
            {
                transport_type: "1",
                box: [
                    {
                        box_size: 1,  // 20英尺
                        price: '',
                    },
                    {
                        box_size: 2,   // 40英尺
                        price: '',
                    }
                ],
            },
            
        ]
    },
    {
        price_type:5,   // 篷布整理费
        tax_price:'',   // 税额
        price_config:[
            {
                transport_type: "2",
                price:'',  // 结算比例
            },
            {
                transport_type: "1",
                box: [
                    {
                        box_size: 1,  // 20英尺
                        price: '',
                    },
                    {
                        box_size: 2,   // 40英尺
                        price: '',
                    }
                ],
            },
            {
                transport_type: "3",
                price:'',  // 结算比例
            },
        ]
    },
    
  ])
  const pinLeiList = ref([])
  onMounted(()=>{
    request({
      url:'goods/type/list',
      method: 'get',
      params:{
        
      },
    }).then(res=>{
        let _data = res.data
        
        pinLeiList.value = _data
    })
    systemDeptPriceConfig.getList({dept_id:props.fromData.id}).then(res=>{
        if(res.data.items.length == 0){
            tab.value = 1
        }else{
            tab.value = 2
            formData.value = res.data.items[0].price_config
            updetaID.value = res.data.items[0].id
        }
    })
  })
  const handleAdd = (indexs,index)=>{
    formData.value[index].price_config[indexs].goods.push({
        good:'',
        price:'', // 百分比或固定单价
        type:1,   // 1 按百分比  2 按单价
    })
  }
  const handleDel = (inx,indexs,index)=>{
    formData.value[index].price_config[indexs].goods.splice(inx, 1)
  }
  const handleBaoCun = ()=>{
    if(tab.value == 1){
        systemDeptPriceConfig.save({dept_id:props.fromData.id,price_config:formData.value}).then(res=>{
            Message.success('保存成功')
        })
    }else{
        systemDeptPriceConfig.update(updetaID.value,{dept_id:props.fromData.id,price_config:formData.value}).then(res=>{
            Message.success('保存成功')
        })
    }
    emits('shuaxin')
  }
  </script>
  
  <style lang="less" scoped>
  .scll{
    scrollbar-width: none; /* 对于 Firefox 隐藏滚动条 */
  }
  .scll::-webkit-scrollbar {
    display: none; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
  }
  .cell{
    padding: 12px;
    border-radius: 12px;
    background: #f3f3f3;
    margin-bottom: 20px;
    &:last-child{
        margin-bottom: 0px;
    }
    .arco-input-wrapper{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
    /deep/.arco-select-view-single{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
    /deep/.arco-select-view-multiple{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
  }
  </style>
  